import React, {memo} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {addNumberAction, subNumberAction} from "./store/modules/counter";

/**
 * 在redux7.1开始，提供了 Hook 的方式，我们再也不需要编写connect和映射函数了
 * useSelect 的作用是将state映射到组件中（可以通过 shallowEqual 比较来决定组件是否重新渲染）
 * useDispatch 非常简单，就是直接获取dispatch函数，之后在组件中使用它派发action即可
 * useStore:可以通过useStore直接获取整个 store 对象（不推荐使用）
 */
const App = memo((props) => {

  //1.使用 useSelector 将 redux 中的数据映射到组件内
  const { counter } = useSelector((state) => {
    return {
      counter: state.counter.count,
    }
  })

  //2.使用 useDispatch 直接获取 dispatch， 通过 dispatch 派发 action 事件
  const dispatch = useDispatch();

  //注：在类组件中不能使用hook，所以在类组件中依然需要使用高阶组件 connect
  const changeNumberHandle = (num, isAdd) => {
    if (isAdd) {
      dispatch(addNumberAction(num));
    } else {
      dispatch(subNumberAction(num));
    }
  }

  return (
      <div>
        <h2>当前技术: {counter}</h2>
        <button onClick={() => changeNumberHandle(1, true)}>+1</button>
        <button onClick={() => changeNumberHandle(1, false)}>-1</button>
      </div>
  );
});

export default App;